/* ====================================== toast  ====================================== */
import React from 'react'
// ===================================================================== Declare
const { $Lazy } = window
// ===================================================================== DatePicker
const DatePicker = $Lazy.load(()=>import('@antd/form/datePicker'))
// ===================================================================== DatePicker
class Index extends React.Component{
	state = {}
	
	onChange = () => {
		const { onChange, onChanged,  name, value } = this.props
		
		const { startValue, endValue } = this.state
		
		const start = startValue === undefined ? value?.[0] : startValue
		const end = endValue === undefined ? value?.[1] : endValue
		
		const model =  { [name[0]]:start, [name[1]]: end }
		
		onChanged?.({ model, start, end, name })
		onChange?.( [start, end] )
	}
	
	setValue = value =>  this.setState({ value: value})
	
	clear = () => this.setState({ value: '' })
	
	render(){
		let { startValue, endValue } = this.state
		const { format, value=[], name, size, width, bordered, disabled, readOnly, showTimeStart, showTimeEnd, outer } = this.props
		
		startValue = this.state.startValue === undefined ? value?.[0] : outer ? value?.[0] : startValue
		endValue = this.state.endValue === undefined ? value?.[1] : outer ? value?.[1] : endValue
		const props = {
			size,
			width,
			bordered,
			disabled,
			readOnly,
			isWrap:true,
			format,
			outer
		}
		return (
			<div className='fxm'>
				<div className='ex'>
					<DatePicker value={startValue||''} p='开始日期' {...props} showTimeStart={showTimeStart} name={name?.[0]} after={endValue} search onChanged={({ value }) => {
						this.setState({ startValue: value }, this.onChange)
					}}/>
				</div>
				<div className='f12 g6 mlr5'>至</div>
				<div className='ex'>
					<DatePicker value={endValue || ''} p='结束日期' showTimeEnd={showTimeEnd} {...props} name={name?.[1]} before={startValue} onChanged={({ value }) => {
						this.setState({ endValue: value }, this.onChange)
					}}/>
				</div>
			</div>
		)
	}
}

export default Index